<template>
	<view>
	<!-- 分类 -->
	<ugo-search ></ugo-search>
	<view class="category" >
		<!-- 顶级分类 -->
		<view class="sup">
			<scroll-view scroll-y>
		<text v-for="(item,index) in cates" :key="item.cat_id" @click="changeId(index)">
				{{item.cat_name}}</text>
			</scroll-view>
		</view>
		<!-- 子级分类 -->
		<view class="sub">
			<scroll-view scroll-y>
				<!-- 封面图 -->
				<image src="http://static.botue.com/ugo/uploads/category.png" class="thumb" />
				<view class="children" :key="item.cat_id" v-for="item in subCate">
					<view class="title">{{item.cat_name}}</view>
					<!-- 品牌 -->
					<view class="brands">
					<navigator 
							:url="'/packone/list/list?query='+item.cat_name" 
							v-for="item in item.children" :key="item.cat_id">
							<ugo-image :src="item.cat_icon" ></ugo-image>
							<text>{{item.cat_name}}</text>
						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
		    return {
		    cates: [] ,// 分类数据
			currentId:0,
			isSearching: false // 标记是否正在搜索
		  }},
		  computed: {
		  	subCate() {
		  		return this.cates.length? this.cates[this.currentId].children:[]
		  	}
		  },
		  onLoad() {
		    this.getCates();
		  },
		  methods: {
		    // 获取分类数据
		    async getCates() {
		      const { msg, data } = await this.request({
		        url: "/categories"
		      });
			  console.log( data )
		      this.cates = data;
		    },
			changeId(id){
			console.log(1);
			return	this.currentId=id
			},
		  }
	}
</script>


<style scoped lang="scss">

	scroll-view {
		height: 100%;
	}
	.category {
		display: flex;
		width: 100%;
		position: absolute;
		top: 100rpx;
		bottom: 0;

		.sup {
			width: 196rpx;
			background-color: #f4f4f4;

			text {
				display: block;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 27rpx;
				color: #333;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				&.active {
					background-color: #fff;
					color: #ea4451;
					position: relative;

					&::before {
						content: "";
						display: block;
						width: 8rpx;
						height: 60rpx;
						transform: translateY(-50%);
						background-color: #ea4451;

						position: absolute;
						left: 0;
						top: 50%;
					}
				}
			}
		}

		.sub {
			flex: 1;
			padding: 20rpx 18rpx;

			.thumb {
				width: 100%;
				height: 180rpx;
			}

			.children {
				text-align: center;
				color: #333;

				.title {
					display: inline-block;
					margin: 40rpx 0 20rpx;
					font-size: 30rpx;

					&::before {
						content: "/";
						margin-right: 20rpx;
						color: #666;
					}

					&::after {
						content: "/";
						margin-left: 20rpx;
						color: #666;
					}
				}
			}

			.brands {
				display: flex;
				flex-wrap: wrap;

				navigator {
					width: 33%;
					margin-bottom: 20rpx;
				}

				image {
					width: 120rpx;
					height: 120rpx;
				}

				text {
					display: block;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
